import React from 'react'

// 自己封装的地区组件
import AreaPicker from '@/components/Area/AreaPicker'

const Profile = () => {
  // 创建表单的对象结构
  const [form] = React.UI.Form.useForm()

  // 初始化的个人资料数据
  let [business, SetBusiness] = React.useState({
    nickname: React.Business.nickname,
    mobile: React.Business.mobile,
    email: React.Business.email ? React.Business.email : '',
    gender: React.Business.gender,
    region_text: React.Business.region_text ? React.Business.region_text : '',
    code: React.Business.district ? React.Business.district : '',
  })

  // 个人头像数据
  let [avatar, SetAvatar] = React.useState([{
    url: React.Business.avatar_text
  }])

  // 删除头像图片
  const DelAvatar = () => SetAvatar([])

  // 上传头像图片
  const upload = async (file: any) => {
    // 覆盖
    React.Business.avatar = file

    return {
      url: URL.createObjectURL(file)
    }
  }

  // 地区显示
  let [Area, SetArea] = React.useState(false)

  // 地区确认方法
  const AreaConfirm = (val: any, list: any) => {
    SetArea(false) //隐藏弹出框

    var code = ''

    for (var item of val) {
      if (item) code = item
    }

    var region_text = ''

    if (list[0]) region_text += `${list[0]}`
    if (list[1]) region_text += `-${list[1]}`
    if (list[2]) region_text += `-${list[2]}`

    //修改数据 对表单中的input元素的值进行数据的修改
    form.setFieldsValue({
      region_text: region_text,
      code: code
    })
  }

  // 表单提交的方法
  const profile = async (values: any) => {
    //组装数据
    values.id = React.Business.id

    //判断是否有上传图片
    if (React.Business.avatar) {
      values.avatar = React.Business.avatar
    }

    //获取到选择的地区码
    if (form.getFieldValue('code')) {
      values.code = form.getFieldValue('code')
    }

    //判断是否有输入密码，如果没有就删除
    if (!values.password) delete values.password;

    //发送请求
    var result = await React.HTTP.upload('/business/profile', values)

    if (result.code == 0) {
      React.error(result.msg)
      return false
    } else {
      //提醒
      React.success(result.msg, () => {
        //覆盖cookie的信息
        React.Cookie.save('business', result.data)

        //修改一下全局的Business用户数据
        React.Business = result.data
        React.SetBusiness(result.data)

        //返回上一个界面
        React.navigate(-1) // JS history.go(-1)
      })
    }
  }

  return (
    <>
      {/* 地区组件 */}
      <AreaPicker visible={Area} onClose={() => SetArea(false)} onConfirm={AreaConfirm} />

      {/* 表单结构 */}
      <React.UI.Form
        name='profile'
        layout='horizontal'
        mode='card'
        form={form}
        initialValues={business}
        onFinish={profile}
        footer={<React.UI.Button block type='submit' color='primary' size='large'>提交修改</React.UI.Button>}
      >
        {/* 头像 */}
        <React.UI.AutoCenter style={{ margin: '30px 0px' }}>
          <React.UI.ImageUploader value={avatar} maxCount={1} onDelete={DelAvatar} onChange={SetAvatar} upload={upload} />
        </React.UI.AutoCenter>

        {/* 昵称 */}
        <React.UI.Form.Item name="nickname" label="昵称" rules={[{ required: true }]}>
          <React.UI.Input placeholder="请输入昵称" />
        </React.UI.Form.Item>

        {/* 手机号码 */}
        <React.UI.Form.Item name="mobile" label="手机号" rules={[{ required: true }, { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不对' }]}>
          <React.UI.Input placeholder="请输入手机号" />
        </React.UI.Form.Item>

        {/* 密码 */}
        <React.UI.Form.Item name="password" label="密码">
          <React.UI.Input type="password" placeholder="请输入密码" />
        </React.UI.Form.Item>

        {/* 邮箱 */}
        <React.UI.Form.Item name="email" label="邮箱" rules={[{ required: true }, { pattern: /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/, message: '邮箱格式不对' }]}>
          <React.UI.Input placeholder="请输入邮箱" />
        </React.UI.Form.Item>

        {/* 性别 */}
        <React.UI.Form.Item name="gender" label="性别" rules={[{ required: true }]}>
          <React.UI.Radio.Group>
            <React.UI.Space direction='horizontal'>
              <React.UI.Radio value='0'>保密</React.UI.Radio>
              <React.UI.Radio value='1'>男</React.UI.Radio>
              <React.UI.Radio value='2'>女</React.UI.Radio>
            </React.UI.Space>
          </React.UI.Radio.Group>
        </React.UI.Form.Item>

        {/* 地区 */}
        <React.UI.Form.Item name="region_text" label="地区" onClick={() => SetArea(true)}>
          <React.UI.Input placeholder="请选择地区" readOnly />
        </React.UI.Form.Item>
      </React.UI.Form>
    </>
  )
}

export default Profile
